<template>
  <div class="com-container">
    <div class="title" :style="comStyle">
      <span>{{showtitle}}</span>
      <span class="iconfont title-icon" :style="comStyle" @click="showCjoice=!showCjoice">&#xe6eb;</span>
      <div class="select-con" v-show="showCjoice">
        <div class="select-item" v-for="item in selectType" :key="item.key" @click="handleSelect(item.key)">"
          {{item.text}}
        </div>
      </div>
    </div>
    <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: "Trend",
    data(){
      return{
        chartInstance:null,
        allData:null,
        cuurentPage:1,
        totalPage:0,
        timeid:null,
        showCjoice:false,
        choiceTypr:'map',
        titleFontSize:0
      }
    },
    methods: {
      initChart() {
        this.chartInstance = this.$echarts.init(this.$refs.trend_ref,this.theme)
        //图标初始化
        const initOption = {
          title: {
            text: '',
            textStyle: {
              fontSize: 66
            },
            left: 20,
            top: 20
          },
          grid: {  //总体样式
            top: "35%",
            left: '3%',
            right: '4%',
            bottom: '1%',
            containLabel: true//包含对称轴的文字
          },
          xAxis: {
            type: 'category',
            boundaryGap:false,
          },
          yAxis: {
            type: 'value',
          },
          legend:{   //图例控制
            top:'15%',
            left:20,
            icon:'circle'
          },
          tooltip: {  //提示
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              z: 0,
              lineStyle:{

                color:'#2D3443'
              }
            }
          },
          series: [
            {
              barWidth: 66,   //柱子宽度
              label: { //z柱子文字样式
                show: true,
                position: 'right',

              },
              itemStyle: {
                barBorderRadius: [0, 33, 33, 0],
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,  //0%
                    color: '#5052EE'
                  },
                  {
                    offset: 1, //100%
                    color: '#AB6EE5'
                  }
                ])
              }
            },

          ]
        }
        this.chartInstance.setOption(initOption)
      },
       getData(getdata) {
        // let {data: getdata} = await this.$http.get('/trend', {})
        this.allData = getdata
        // this.allData.sort((a, b) => {
        //   return b.value - a.value
        // })
        console.log(this.allData);
        this.undateChart()
      },
      undateChart(){
        const colorArr1 = [
          'rgba(11, 168, 44, 0.5)',
          'rgba(44, 110, 255, 0.5)',
          'rgba(22, 242, 217, 0.5)',
          'rgba(254, 33, 30, 0.5)',
          'rgba(250, 105, 0, 0.5)'
        ]
        // 全透明的颜色值
        const colorArr2 = [
          'rgba(11, 168, 44, 0)',
          'rgba(44, 110, 255, 0)',
          'rgba(22, 242, 217, 0)',
          'rgba(254, 33, 30, 0)',
          'rgba(250, 105, 0, 0)'
        ]
        const timeArr=this.allData.common.month
        const valueArr=this.allData[this.choiceTypr].data
        const seriesArr=valueArr.map((item,index)=>{
          return{
            name:item.name,
            type:'line',
            smooth:true,
            data:item.data,
            stack:[this.choiceTypr],
            areaStyle:{
              color:new this.$echarts.graphic.LinearGradient(0,0,0,1,[{
                offset:0,  //0%
                color:colorArr1[index]
              },
                {
                  offset:1, //100%
                  color:colorArr2[index]
                }])
            }
          }
        })

        const legenfArr=valueArr.map(item=>{
          return item.name
        })
        const dataOption={
          xAxis: {
            data:timeArr
          },
          legend:{
            data:legenfArr
          },
          series:seriesArr
        }
        this.chartInstance.setOption(dataOption)
      },
      screenAdapter(){
        // console.log(this.$refs.seller_ref.offsetWidth);
        this.titleFontSize=this.$refs.trend_ref.offsetWidth/100*3.6
        const adapterOption={
          title: {
            textStyle:{
              fontSize:this.titleFontSize
            },
          },
          tooltip:{  //提示
            axisPointer:{
              lineStyle:{
                width:this.titleFontSize/12,
              }
            }
          },
          series:[
            {
              barWidth:this.titleFontSize,   //柱子宽度
              itemStyle:{
                barBorderRadius:[0,this.titleFontSize/2,this.titleFontSize/2,0]
              }
            }
          ]
        }
        this.chartInstance.setOption(adapterOption)
        this.chartInstance.resize()
      },
      handleSelect(e){
        this.choiceTypr=e
        this.undateChart()
        this.showCjoice=false
      }
    },
    computed:{
      selectType(){
        if(this.allData){
          return this.allData.type.filter(item=>{
            return item.key !==this.choiceTypr
          })
        }else {
          return []
        }
      },
      showtitle(){
        if(this.allData){
          return this.allData[this.choiceTypr].title
        }else {
          return ''
        }
      },
      comStyle(){
        return {
          fontSize:this.titleFontSize+"px"
        }
      },
      ...mapState(['theme'])
    },
    watch: {
      theme () {
        // console.log('主题切换了')
        this.chartInstance.dispose() // 销毁当前的图表
        this.initChart() // 重新以最新的主题名称初始化图表对象
        this.screenAdapter() // 完成屏幕的适配
        this.undateChart() // 更新图表的展示
      }
    },
    mounted(){
      this.initChart()
      // this.getData()
      //发送数据
      this.$socket.send({
        action:'getData',
        socketType:'trendData',
        chartName:'trend',
        value:''
      })
      window.addEventListener('resize',this.screenAdapter)
      this.screenAdapter()
    },
    created() {
    this.$socket.registerCallBack('trendData',this.getData)
      },
    destroyed() {
      // clearInterval(this.timeid)
      this.$socket.unRegisterCallBack('trendData')
      window.removeEventListener('resize',this.screenAdapter)
    }
  }
</script>

<style scoped>
.title{
  position: absolute;
  left:20px;
  top: 20px;
  z-index: 10;
  color: pink;
}
  .title-icon{
    font-size: 28px;
    margin-left: 10px;
    cursor: pointer;
  }
</style>
